<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

<ui:remove>
Usage: This template is used to decorate the editor sub elements. 
The important thing is, the html wrapping, css and javascript remains the same. 
While the inner content is totally customizable
</ui:remove>

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	>

	
	<c:set var="parentDiv" value="#{parentDiv}"/>
	<c:if test="#{empty parentDiv}">
		<c:set var="parentDiv" value="editHeader"/>
	</c:if>
	<c:set var="width" value="#{width}"/>
	<c:if test="#{empty width}">
		<c:set var="width" value="420px"/>
	</c:if>
	<c:set var="divSubElement" value="div#{subElementName}" />
	<c:set var="divSubElementHeader" value="#{divSubElement}Header" />
	<c:set var="divToggle" value="toggle#{subElementName}" />
	
	<c:set var="duration" value="500"/>

	<!--subwrapping -->
	
		<!-- The threads -->

		<div id="#{subElementDiv}" class="editHeaderSubElement">
			<div id="div#{subElementName}Header" style="cursor: pointer;">
				<ui:insert name="title" />
			</div>
			<div id="#{divToggle}" class="editHeaderSubElementContent"
				style="width: 0px; height: 0px; position: relative; overflow: hidden;">
				<!-- end: supwrapping -->
				
				<!-- the element to decorate -->
				<ui:insert name="content" />
				
				<!-- end: subwrapping -->
			</div>
		</div>

		<script>
		
			//Set the graphical layout
			originalWidthOfEditHeader = $("##{parentDiv}").css("width"); 
			maxWidth = "#{width}";
			heightOfToggleDiv = "100%";
			$("##{divSubElementHeader}").toggle(
				(function() {
					$("##{parentDiv}").animate({width: maxWidth}, #{duration});
					$("##{divToggle}").animate({width: maxWidth, height: heightOfToggleDiv}, #{duration});											
				}),
				(function() {
					$("##{parentDiv}").animate({width: originalWidthOfEditHeader}, #{duration});
					$("##{divToggle}").animate({width: "0px", height: "0px"}, #{duration});						
				})
				
			);
		</script>
		<!-- end: subwrapping -->
	
</ui:composition>
</html>